// 第一种:
import React from 'react';
import {Line, Pie} from '@ant-design/plots';
import {Card, Col, Row} from "antd";
import useGenderData from "@/hooks/get_gender_data.ts";

interface DataItem {
    value: number;
    gender: string;
}

const Gender: React.FC = () => {
    const {GenderData} = useGenderData()

    const config1 = {
        data: GenderData,
        angleField: 'value',
        colorField: 'gender',
        title:'用户性别分布',
        label: {
            text: ({value, gender}: DataItem) => {
                return `${gender}性用户: 合计${parseInt(String(value))}人`;
            },
            fill: '#ffffff',
            fontSize: 18,
            fontWeight: 700,
        },
        style: {
            padding: 10,
            fill: ({gender}: DataItem) => {
                if (gender === '男') {
                    return 'p(a)https://gw.alipayobjects.com/zos/antfincdn/FioHMFgIld/pie-wenli1.png';
                }
                return 'p(a)https://gw.alipayobjects.com/zos/antfincdn/Ye2DqRx%2627/pie-wenli2.png';
            },
        },
        legend: {
            color: {
                title: '男女性别分布',
                position: 'right',
                rowPadding: 5,
            },
        },
    };

    const data = [
        {week: '周一', value: 13},
        {week: '周二', value: 33},
        {week: '周三', value: 53},
        {week: '周四', value: 33},
        {week: '周五', value: 34},
        {week: '周六', value: 36},
        {week: '周日', value: 60},
    ];
    const config2 = {
        data,
        xField: 'week',
        yField: 'value',
        point: {
            shapeField: 'square',
            sizeField: 4,
        },
        title:'近一周用户增长曲线',
        interaction: {
            tooltip: {
                marker: false,
            },
        },
        style: {
            lineWidth: 2,
        },
    };

    return (
        <Card
            title={'用户性别统计'}
            style={{
                width: '100%',
                height: '90vh',
            }}
        >

            <Row justify="space-evenly" align={'middle'}>
                <Col span={12}>
                    <div style={{width: '40vw', height: '70vh'}}>
                        <Pie {...config1} />
                    </div>
                </Col>

                <Col span={12}>
                    <div style={{width: '40vw', height: '70vh'}}>
                        <Line {...config2} />
                    </div>
                </Col>
            </Row>

        </Card>
    )

}

export default Gender;